<template>
  <div class="event-termination-container">
    <el-card class="termination-card" shadow="hover">
      <!-- 页面标题 -->
      <div class="card-title">事件终止</div>

      <!-- 事件终止表单 -->
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="80px"
        class="termination-form"
      >
        <!-- 事件名称 + 经办人（同一行） -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="事件名称">
              <el-select
                v-model="form.eventName"
                placeholder="请选择事件名称"
                style="width: 100%"
              >
                <el-option
                  label="2024年12月11日汤营超标"
                  value="20241211tycb"
                ></el-option>
                <el-option
                  label="2024年12月15日河道治理"
                  value="20241215hdzl"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="*经办人" prop="handler">
              <el-input
                v-model="form.handler"
                placeholder="请输入经办人"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 审批人 + 申请时间（同一行） -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="*审批人" prop="approver">
              <el-select
                v-model="form.approver"
                placeholder="请选择审批人"
                style="width: 100%"
              >
                <el-option label="管理员" value="admin"></el-option>
                <el-option label="负责人" value="leader"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="*申请时间" prop="applyTime">
              <el-date-picker
                v-model="form.applyTime"
                type="date"
                placeholder="选择申请时间"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 事件描述（单独一行） -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="事件描述">
              <el-input
                v-model="form.eventDesc"
                type="textarea"
                placeholder="请输入事件描述"
                style="width: 100%"
                rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 操作按钮 -->
        <el-row>
          <el-col :span="24" class="btn-group">
            <el-button type="primary" @click="handleSubmit">申请终止</el-button>
            <el-button @click="handleCancel" style="margin-left: 10px"
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EventTermination", // 组件名称
  data() {
    return {
      // 表单数据
      form: {
        eventName: "20241211tycb", // 默认选中“2024年12月11日汤营超标”
        handler: "", // 经办人（必填）
        approver: "admin", // 默认选中“管理员”
        applyTime: "2025-01-07", // 默认申请时间
        eventDesc: "", // 事件描述
      },
      // 表单校验规则
      formRules: {
        handler: [{ required: true, message: "请输入经办人", trigger: "blur" }],
        approver: [
          { required: true, message: "请选择审批人", trigger: "blur" },
        ],
        applyTime: [
          { required: true, message: "请选择申请时间", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 提交申请终止
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 实际项目：调用“事件终止申请”接口
          this.$message.success("事件终止申请已提交！");
          // 可根据需求添加表单重置/弹窗关闭逻辑
        }
      });
    },

    // 取消操作
    handleCancel() {
      // 重置表单
      this.$refs.formRef.resetFields();
      // 若组件是弹窗形式，可在此关闭弹窗：this.dialogVisible = false
      this.$message.info("已取消事件终止申请");
    },
  },
};
</script>

<style lang="scss" scoped>
.event-termination-container {
  padding: 15px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 20px);

  .termination-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 20px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
    }

    // 表单样式
    .termination-form {
      .el-form-item {
        margin-bottom: 18px;
      }

      // 必填项星号颜色
      .el-form-item__label::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
      // 非必填项移除星号
      .el-form-item:nth-child(1) .el-form-item__label::before {
        content: "";
        margin-right: 0;
      }
    }

    // 按钮组样式
    .btn-group {
      margin-top: 10px;
    }
  }
}
</style>
